<template>
    <div>
        <RiskRightModule02 style="width: 100vw !important; position: absolute; left: 0">
            <p slot="rtitle">条目标签管理</p>
            <span slot="button">
                <el-button type="primary" @click="addTag">新增</el-button>
            </span>
            <div style="hegiht: 300px">
                <el-table
                    :header-cell-style="{ backgroundColor: '#e8f3ff', padding: '4px 0', 'text-align': 'center' }"
                    :cell-style="{ padding: '0' }"
                    :row-style="{ height: '35px' }"
                    :header-row-style="{ height: '35px', padding: '5px 0' }"
                    :data="tagList"
                    border
                >
                    <el-table-column label="标签编号" prop="tagId"> </el-table-column>
                    <el-table-column label="标签名称" prop="tagName"> </el-table-column>
                    <el-table-column label="是否主动触警" prop="initiativeWarn">
                        <template slot-scope="scope">
                            {{ initiativeWarnType[scope.row.initiativeWarn] }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="140">
                        <template slot-scope="scope">
                            <RiskIconButton
                                type="primary"
                                icon="el-icon-edit"
                                topTitle="更新标签"
                                @on-click="handleTag(scope.row, 'update')"
                            ></RiskIconButton>
                            <RiskIconButton
                                type="danger"
                                icon="el-icon-delete"
                                topTitle="删除标签"
                                @on-click="handleTag(scope.row, 'delete')"
                            ></RiskIconButton>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <risk-pagination :paging="paging" @page-change="getTagList"></risk-pagination>
        </RiskRightModule02>
        <div>
            <yh-dialog drag :visible.sync="showDialog" :title="isAdd ? '新增条目标签' : '更新条目标签'">
                <el-form label-width="120px">
                    <el-form-item label="标签编号" prop="tagId">
                        <el-input v-model="formModal.tagId" disabled size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="标签名称" prop="tagName">
                        <el-input v-model="formModal.tagName" size="mini" @input="handleTagNameInput"></el-input>
                    </el-form-item>
                    <el-form-item label="是否主动触警" prop="initiativeWarn">
                        <el-select v-model="formModal.initiativeWarn" size="mini" style="width: 100%" clearable>
                            <el-option v-for="(value, key) in initiativeWarnType" :key="key" :value="key" :label="value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button type="primary" @click="handleDialogButton">确定</el-button>
                    <el-button @click="showDialog = false">取消</el-button>
                </div>
            </yh-dialog>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import RiskRightModule02 from '@/common/components/risk-right-module02.vue';
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import RiskPagination from '@/common/components/risk-pagination.vue';

@Component({
    name: 'EntryTag',
    components: {
        RiskRightModule02,
        RiskIconButton,
        RiskPagination,
    },
})
export default class EntryTag extends Vue {
    private tagList: any[] = []; // 标签总数据

    private showDialog: boolean = false; // 是否展示dialog

    private isAdd: boolean = true; // 是否为新增(false为更新)

    initiativeWarnType: any = {
        '0': '是',
        '1': '否',
    };

    // 分页
    private paging = {
        currentPage: 1,
        pageSize: 10,
        total: 0,
    };

    // 表单模板
    private formModal: any = {
        tagId: '自动生成',
        tagName: '',
        initiativeWarn: '1',
    };

    mounted() {
        this.getTagList(1);
    }

    private getTagList(cur?: number): void {
        if (cur) {
            this.paging.currentPage = cur;
        }
        this.$axios
            .post('/entryTag/list', {
                paging: this.paging,
                tagName: '',
            })
            .then((res: any) => {
                this.paging.total = res.total;
                this.tagList = res.list;
            });
    }

    // 新增标签
    private addTag(): void {
        this.showDialog = true;
        this.isAdd = true;
        this.clearDialog();
    }

    // 处理标签
    private handleTag(row: any, type: string): void {
        if (type == 'update') {
            this.isAdd = false;
            this.showDialog = true;
            this.formModal = JSON.parse(JSON.stringify(row));
        } else {
            this.$confirm('你确定删除该标签?', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
            })
                .then(() => {
                    this.deleteTag(row);
                })
                .catch(action => {
                    this.yh_message_info('取消删除');
                });
        }
    }

    private deleteTag(row: any) {
        this.$axios
            .post('/entryTag/delete', [row.tagId])
            .then((res: any) => {
                this.yh_message_success('删除成功');
                this.getTagList(1);
            })
            .catch(e => {
                console.log(e);
            });
    }

    // 弹框确认
    private handleDialogButton(): void {
        if (!this.formModal.tagName) {
            this.yh_message_error('标签内容不可为空');
            return;
        }
        if (!this.formModal.initiativeWarn) {
            this.yh_message_error('是否主动触警不可为空');
            return;
        }
        if (this.isAdd) {
            this.$axios
                .post('/entryTag/insert', this.formModal)
                .then((res: any) => {
                    this.yh_message_success('新增成功');
                    this.showDialog = false;
                    this.getTagList(1);
                })
                .catch(e => {
                    console.log(e);
                    this.showDialog = false;
                });
        } else {
            this.$axios
                .post('/entryTag/update', this.formModal)
                .then((res: any) => {
                    this.yh_message_success('更新成功');
                    this.showDialog = false;
                    this.getTagList(1);
                })
                .catch(e => {
                    this.showDialog = false;
                    console.log(e);
                });
        }
    }

    private clearDialog() {
        this.formModal = {
            tagId: '自动生成',
            tagName: '',
            initiativeWarn: '1',
        };
    }

    // 标签名称输入框
    private handleTagNameInput(value): void {
        // console.log(value, 'value');
        // let subject = value.replace(/[^\u4E00-\u9FA5\\a-z\\A-\\Z0-9 ]/g, '');
        // this.formModal.tagName = subject;
    }
}
</script>
<style lang="scss" scoped>
/deep/ .el-dialog {
    .el-dialog__body {
        padding-right: 40px !important;
    }
}
</style>
